<template>
  <el-main class="container">
    <!-- 导航栏 -->
    <h4 style="font-weight: normal">条形码发放回收管理</h4>

    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/barcodeGrantList' }"
        >条形码发放记录信息管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>条形码回收记录信息列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 头顶标签结束 -->

    <!-- Start Page content -->
    <el-card class="content">
      <el-row>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="dialogFormVisible = true"
          >添加条形码退回信息</el-button
        >
        <el-button
          type="success"
          icon="el-icon-refresh"
          @click="refresh"
          style="font: 700; float: right"
        ></el-button>
      </el-row>
      <div class="block">
        <el-row class="demo-autocomplete">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <span class="demonstration">显示</span>
              <el-pagination
                @size-change="handleSizeChange"
                :page-sizes="[10, 25, 50, 100]"
                :page-size="10"
                layout="sizes"
                :total="1000"
              >
              </el-pagination></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light" style="float: right">
              <el-input placeholder="请输入内容" v-model="search">
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="getList"
                ></el-button>
              </el-input></div
          ></el-col>
        </el-row>
        <!-- 条形码发放列表 -->
        <el-table :data="tableData" border>
          <el-table-column
            label="条形码ID"
            sortable
            prop="barcodeId"
          ></el-table-column>
          <el-table-column
            label="发放档口ID"
            sortable
            prop="stallsId"
          ></el-table-column>
          <el-table-column
            label="回收时间"
            sortable
            prop="recoveryDate"
          ></el-table-column>
          <el-table-column
            label="回收人员"
            sortable
            prop="recoveryPerson"
          ></el-table-column>
          <el-table-column
            label="送回人员"
            sortable
            prop="sendbackPerson"
          ></el-table-column>
          <el-table-column
            label="退回数量"
            sortable
            prop="sendbackCount"
          ></el-table-column>
          <el-table-column
            label="退回原因"
            sortable
            prop="sendbackCause"
          ></el-table-column>
          <el-table-column label="操作" width="180px">
            <!-- eslint-disable -->
            <template slot-scope="scope" style="margin-right: 0px">
              <!-- eslint-enable -->
              <el-button type="success" icon="el-icon-setting" size="mini"
                >明细</el-button
              >
              <el-button type="primary" icon="el-icon-edit" size="mini"
                >修改</el-button
              >
              <el-button type="danger" icon="el-icon-delete" size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row class="demo-autocomplete" style="margin-top: 10px">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <span class="demonstration" style="padding-top: 7px">显示</span>
              <el-pagination :page-size="size" layout="total" :total="total">
              </el-pagination></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light" style="float: right">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                background
                layout="prev, pager, next"
                :total="total"
              >
              </el-pagination></div
          ></el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 添加条形码退回信息 -->
    <el-dialog title="条形码退回信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-main>
</template>
<script>
export default {
  inject: ["reload"],
  name: "refresh",
  data() {
    return {
      queryInfo: {
        query: "",
        //当前页数
        pageNum: 1,
        //当前每页显示多少条
        pageSize: 50,
      },
      search: "",
      tableData: [],
      total: 0,
      size: 0,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },

  created() {
    // 条形码发放的生命函数
    this.getList();
  },

  methods: {
    // 数据刷新
    refresh() {
      this.reload();
    },
    // 监听页码值改变的事
    handleSizeChange(newSize) {
      // 改变当前页码
      this.queryInfo.pageSize = newSize;
      // 刷新列表
      this.getList();
    },
    //监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getList();
    },
    // 条形码发放列表函数
    async getList() {
      const { data: res } = await this.reqM1Service(
        `/allRecovery/${this.queryInfo.pageNum}/${this.queryInfo.pageSize}`,
        "",
        "get"
      );
      console.log(res);
      if (res.status != 0) {
        return this.$message.error("获取数据失败");
      }
      this.tableData = res.object.content;
      this.total = res.object.content.length;
      this.size = res.size;
    },
  },
  computed: {
    // 模糊搜索
    // 模糊搜索
    tables() {
      const search = this.search;
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableData.filter((data) => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some((key) => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  margin-left: 15px;
  margin-right: 15px;
}

/deep/.el-breadcrumb__inner.is-link {
  color: #98a6ad;
  font-weight: 500;
}
/deep/.el-breadcrumb__inner.is-link:hover {
  color: #777;
}
/deep/.el-pagination {
  font-weight: 500;
}
/deep/.el-pagination .el-select .el-input {
  margin: -13px 5px;
}
/deep/.demonstration {
  float: left;
  padding-top: 8px;
}
/deep/.block {
  margin-top: 10px;
  margin-left: 20px;
}
/deep/.el-select-dropdown__list {
  padding: 8px 0 im !important;
}
/deep/ .el-table {
  margin-top: 10px;
}
/deep/ .el-card {
  margin-top: 10px;
}
/deep/ .el-button + .el-button {
  margin-left: 5px;
}
/deep/ .el-button--mini {
  padding: 6px 2px;
}
</style>